<!--  -->
<template>
  <el-container>
    <el-header>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
      >
        <el-menu-item index="1" @click="changeIndex('1')">单曲</el-menu-item>
        <el-menu-item index="2" @click="changeIndex('2')">歌手</el-menu-item>
        <el-menu-item index="3" @click="changeIndex('3')">专辑</el-menu-item>
        <el-menu-item index="4" @click="changeIndex('4')">视频</el-menu-item>
        <el-menu-item index="5" @click="changeIndex('5')">歌单</el-menu-item>
      </el-menu>
    </el-header>
    <SearchMusic v-show="activeIndex === '1'"></SearchMusic>
    <SearchSinger v-show="activeIndex === '2'"></SearchSinger>
    <SearchAlbum v-show="activeIndex === '3'"></SearchAlbum>
    <SearchVideo v-show="activeIndex === '4'"></SearchVideo>
    <SearchSongList v-show="activeIndex === '5'"></SearchSongList>
  </el-container>
</template>

<script>
import {
  getSearchList,
  getMusicUrl,
  getSearchSuggest,
} from "util/findMusic.js";
import SearchMusic from "@/components/content/searchContent/SearchMusic.vue";
import SearchSinger from "@/components/content/searchContent/SearchSinger.vue";
import SearchAlbum from "@/components/content/searchContent/SearchAlbum.vue";
import SearchVideo from "@/components/content/searchContent/SearchVideo.vue";
import SearchSongList from "@/components/content/searchContent/SearchSongList.vue";
export default {
  name: "",
  components: {
    SearchMusic,
    SearchSinger,
    SearchAlbum,
    SearchVideo,
    SearchSongList,
  },
  data() {
    return {
      activeIndex: "1",
    };
  },
  created() {},
  methods: {
    changeIndex(index) {
      this.activeIndex = index;
    },
  },
};
</script>
<style lang='less' scoped>
.el-header {
  padding: 0 5.25rem;
  width: 100%;
  .el-menu-demo {
    // width: 100%;
    border-radius: 5px;
    border-bottom: none;
    width: 460px;
    display: flex;
    justify-content: space-evenly;
    /deep/.el-menu-item {
      flex: 1;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px 10px;
      border-bottom: none;
      border-radius: 5px;
      color: rgb(83, 81, 81);
      font-size: 17px;
      font-weight: 600;
    }
    /deep/.el-menu-item:hover {
      background-color: rgba(184, 178, 178, 0.918);
      color: #fff;
    }
    /deep/.el-menu-item:focus,
    /deep/.el-menu-item.is-active {
      border-bottom: none;
      background-color: #f6f6f8;
    }
  }
}
.el-main {
  padding: 0;
}
</style>